<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane v-for="(item,index) in menu_data" :key="index" :label="item.label" :name="item.name"
				class="tab-pane">
				<Form :sys="data[index]" v-if="item.name!='add'"></Form>
				<el-form ref="form" label-width="100px" v-else>
					<el-form-item label="名称">
						<el-input v-model="add_form.content"></el-input>
					</el-form-item>
					<el-form-item label="标识">
						<el-input v-model="add_form.key"></el-input>
					</el-form-item>

					<el-form-item label="配置类型">
						<el-select v-model="add_form.type" placeholder="请选择" style="width: 100%;">
							<el-option v-for="(item,index) in menu_data" :key="index" :label="item.label"
								:value="index">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="类型">
						<el-select v-model="add_form.switch" placeholder="请选择" style="width: 100%;">
							<el-option v-for="(item,index) in switchs" :key="index" :label="item" :value="index">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="值" v-if="add_form.switch>0&&add_form.switch<4">
						<el-input v-model="add_form.other" placeholder="分号隔开,如男;女"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">添加</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import Form from './sysform.vue'
	export default {
		components: {
			Form
		},
		data() {
			return {
				menu_data: [{
						label: "基本配置",
						name: "basic",
					},
					{
						label: "后台配置",
						name: "cms"
					},
					{
						label: "微信配置",
						name: "wx",
					},
					{
						label: "阿里云配置",
						name: "ali"
					},
					{
						label: "背景",
						name: "bg"
					},
					{
						label: "发财树",
						name: "tree"
					},
					{
						label: "添加配置",
						name: "add"
					},

				],
				data: [],
				add_form: {
					key: '',
					value: '',
					type: '',
					switch: '',
					content: '',
					other: ''
				},
				index: 0,
				switchs: ["文本", '开关', '下拉', '多选', '图片', '文本域', '颜色提取器'],
				activeName: 'basic',
			};
		},
		mounted() {
			this.get_data()
		},
		methods: {
			handleClick(tab, event) {
				this.index = tab.index
			},
			get_data() {
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$model.get("/cms/sys/get").then(res => {
					if (res.code == 200) {
						this.data = res.data
						loading.close();
					}
				})

			},
			onSubmit() {
				this.add_form["table"] = "sys"
				this.$model.post("/cms/table/insert", this.add_form).then(res => {
					if (res.code == 200) {
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.get_data()

					}
				})
			}
		}

	};
</script>

<style>
	.tab-pane {
		width: 360px;
	}
</style>
